<template>
    <div class="detail">
        <header>
            <div class="header-returns" v-show='isShow'>
                <div @click="goBack">
                    <i class="iconfont icon-fanhui"></i>
                </div>
                <div>
                    <i class="iconfont icon-kefu"></i>
                </div>
            </div>
            <div 
            class="header-bar" 
            v-show='!isShow'
            :style="styleOption"
            >
                <div @click="goBack">
                    <i class="iconfont icon-fanhui"></i>
                </div>
                <div>
                    <span>商品详情</span>
                    <span>商品评价</span>
                </div>
                <div>
                    <i class="iconfont icon-kefu"></i>
                </div>
            </div>
        </header>
        <section ref="wrapper">
            <div>
                <div class="swiper-main">
                    <swiper :options="swiperOption">
                        <swiper-slide v-for="(item, index) in swiperList" :key="index">
                            <img :src="item.imgUrl" alt="">
                        </swiper-slide>
                    </swiper>
                    <div class="swiper-pagination"></div>
                </div>
                <div class="goods-name">
                    <h1>{{goods.name}}</h1>
                    <div>性价首选,高端大气</div>
                </div>
                
                <div class="goods-price">
                    <div class="oprice">
                        <span>￥</span>
                        <b>{{goods.price}}</b>
                    </div>
                    <div class="pprice">
                        <span>价格:</span>
                        <del>￥399</del>
                    </div>
                    
                </div>
                <div>
                    <img style="width:100%;height:400px;" :src="goods.imgUrl" alt="">
                    <img style="width:100%;height:400px;" :src="goods.imgUrl" alt="">
                    <img style="width:100%;height:400px;" :src="goods.imgUrl" alt="">
                    <img style="width:100%;height:400px;" :src="goods.imgUrl" alt="">
                </div>
            </div>
        </section>
        
            
        <footer>
            <div class="add-cart" @click="addCart">加入购物车</div>
            <div >立即购买</div>
        </footer>
    </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
import BetterScroll from 'better-scroll';
import http from '@/common/api/request.js';
import { Toast } from 'mint-ui';
export default {
     data() {
	    return {
            id:0,
            goods:{},
            styleOption:{},
            BetterScroll:'',
            isShow:true,
            swiperList:[
                {
                    imgUrl:'./images/detail1.jpeg',
                },
                {
                    imgUrl:'./images/goods-list1.jpeg',
                },
                {
                    imgUrl:'./images/goods-list3.jpg',
                },
            ],
	      swiperOption: {
	        direction: 'horizontal',
	        autoplay: true,
	        speed: 500,
	        pagination: {
	          el: '.swiper-pagination',
              type:'fraction'
	        }
	      }
	    };
	  },
  components: {
	    swiper,
	    swiperSlide
	  },
      created(){
        this.id = this.$route.query.id;
         this.getData();
        
      },
      mounted(){
          this.BetterScroll = new BetterScroll(this.$refs.wrapper,{
          probeType:3,
          bounce:false,
          click:true,
          
          })
        this.BetterScroll.on('scroll',(pos)=>{
            let posY = Math.abs(pos.y);
            let opacity = posY / 180;
            // console.log(opacity);
            opacity  = opacity > 1 ? 1 : opacity;
            this.styleOption = {
                opacity:opacity
            }
            // console.log(opacity);
          
            if(posY >= 50){
                this.isShow = false;
            }else{
                this.isShow = true;
            }
        })
      },
      activated(){
        //判断当前urlid与之前id是否一致
        //组件缓存，如果两次请求的是同一个路由，则不再请求直接使用缓存，如果两次不是相同的路由则发送请求
        if( this.$route.query.id != this.id ){
            this.getData();
            this.id = this.$route.query.id;
        }
        
      },
      methods:{
       async getData(){
            let id = this.$route.query.id;
            let res = await http.$axios({
                url:'/api/goods/id',
                params:{
                    id
                }
            })
            this.goods = res;
           
        },
        //加入购物车
        addCart(){
            let id = this.$route.query.id;
            http.$axios({
                url:'/api/addCart',
                method:'post',
                data:{
                    //传商品id
                    goodsId : id,
                },
                //传用户id
                headers:{
                    token:true,
                }
            }).then(res=>{
                if( res.success ){
                    Toast('添加购物车成功');
                }
                
            })
        },
        //返回上一页
        goBack(){
            this.$router.back();
        }
      }
}
</script>
<style scoped>
.detail{
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
header{
    position: fixed;
    left:0;
    top: 0;
    z-index: 99;
    width: 100%;
    height: 2.75rem;
}
header .header-returns{
    width: 100%;
    height: 2.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

}
header .header-returns div{
    width: 2.125rem;
    height: 2.125rem;
    text-align: center;
    line-height: 2.125rem;
    margin: 0 0.625rem;
    background-color: rgba(0,0,0,0.3);
    border-radius: 50%;
}
header .header-returns div i{
    font-size: 1.625rem;
    color: #fff;
}
header .header-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 2.125rem;
    background-color: #fff;
    font-size: 1rem;

}
header .header-bar span{
    padding: 0 0.625rem;
}
header .header-bar i{
    font-size: 1.375rem;
    padding: 0 0.625rem;
}
section{
    flex: 1;
    overflow: hidden;
}
.swiper-main{
    position: relative;
    width: 100%;
    height: 23.4375rem;
    overflow: hidden;
}
.swiper-wrapper img {
	width: 100%;
	height: 23.4375rem;
}
	
.swiper-main img {
	width: 100%;
	height: 23.4375rem;
}
.swiper-pagination{
	width: 100%;
	bottom: 0.625rem;	
    text-align: right;
    color: #fff;
}
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
    left: -1.25rem;
}
::v-deep .swiper-pagination-bullet-active{
	background-color: green;
}
::v-deep .swiper-pagination-bullet{
	margin: 0 0.1875rem;
}
.goods-name{
    padding: 0.625rem 1.25rem;
    border: 0.0625rem solid #ccc;
}
.goods-name h1{
    font-size: 1.125rem;
    font-weight: 500;
}
.goods-name div{
    padding: 0.1875rem 0;
    font-size: 0.875rem;
    color:#999
}
.goods-price{
    padding: 0.625rem 1.25rem;
}
.goods-price .oprice{
    color: red;
    font-size: 1.375rem;
}
.goods-price .pprice{
    color: #999;
}
footer{
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 3.0625rem;
    width: 100%;
    border-top: 0.0625rem solid #ccc;
    background-color: #fff;
}
footer div{
    width: 50%;
    line-height: 3.0625rem;
    text-align: center;
    font-size: 1rem;
    color:#fff;
    background-color: red;
}
footer .add-cart{
    background-color: #FF9500;
}

</style>